<template>
	<view>
		<view class="font-72 font-weight f-t textC m-t-80">金点子商铺网</view>
		<view class="popupBox">
			<view class="font-32 font-weight textC">获取你的昵称、头像、手机号</view>
			<view class="font-28 grey textC">获取用户头像、昵称、手机号完善个人资料，主要用于向用户提供具有辨识度的用户中心界面</view>
			<button open-type="chooseAvatar" @chooseavatar="chooseavatar" class="infoItemImg flex_center m-b-40 m-t-30">
				<view class="flex_center textC">
					<image :src="$util.img(avatar)" v-if="avatar" mode=""></image>
					<image v-else src="/static/userNone.png" mode=""></image>
				</view>
			</button>
			<view class="infoItemName">
				<input type="nickname" @keyboardheightchange="keyboardheightchange" @input="input" v-model="nickname"
					placeholder-class="font-30 textC" placeholder="请输入昵称">
			</view>
			<block v-if="xyShow">
				<!-- 获取手机号、 -->
				<button v-if="loginShow=='0'" @getphonenumber="getphonenumber" open-type="getPhoneNumber" type="primary"
					style="margin-top: 60rpx;">
					一键授权登录
				</button>
				<!-- 不获取 -->
				<button v-if="loginShow=='1'" @click="loginOpen" type="primary" style="margin-top: 60rpx;">
					一键授权登录
				</button>
			</block>

			<button v-else type="primary" style="margin-top: 60rpx;" @click="noneShow">
				一键授权登录
			</button>
			<view class="textC m-t-30 graycolor" @click="noneLogin">暂不登录</view>
		</view>

		<view class="bomPosition">
			<view class="flex_center p-b-20" @click="xyShow=!xyShow">
				<view v-if="!xyShow" class="iconfont icon-weixuanzhong grey m-r-10" style="font-size: 32rpx;">
				</view>
				<view v-else class="iconfont icon-choose f-t m-r-10" style="font-size: 32rpx;"></view>
				<view class="font-24" @click.stop="openFn"><text class="grey">我已阅读并同意</text>用户协议</view>
			</view>
		</view>
		<uv-popup ref="popup" round="20">
			<view scroll-y="true" class="scrollSty">
				<view style="width: 550rpx;white-space: pre-wrap;" v-html="article.user_agreement">
				</view>
			</view>
		</uv-popup>
		<uv-toast ref="uToast"></uv-toast>
	</view>
</template>

<script>
	import config from "@/common/js/config.js"
	export default {
		name: "loginPack",
		data() {
			return {
				nickname: '',
				avatar: '',
				phone: '',
				xyShow: false,
				article: {},
				loginShow: ''
			};
		},
		mixins: ['config'],
		onLoad() {
			this.getjudge()
			this.articleFn()
		},
		methods: {
			noneLogin() {
				uni.navigateBack()
			},
			fromTxt(val) {
				 return val.replace(/\n/g, '<br>')
			},
			// 判断登录过没
			getjudge() {
				uni.login({
					provider: 'weixin', //使用微信登录
					success: loginRes => {
						this.$api.sendRequest({
							url: '/api/user/getopenid',
							data: {
								code: loginRes.code
							},
							success: openRes => {
								this.$api.sendRequest({
									url: '/api/user/openidIsExits',
									data: {
										openid: openRes.data.openid
									},
									success: res => {
										this.loginShow = res.data
									}
								})
							}
						})
					}
				})
			},

			noneShow() {
				this.$refs.uToast.show({
					type: 'default',
					message: '请勾选用户协议',
					duration: 1500
				})
			},

			openFn() {
				this.$refs.popup.open('center');
			},

			articleFn() {
				this.$api.sendRequest({
					url: '/api/index/config',
					success: res => {
						this.article = res.data
					}
				})
			},
			// 不授权手机号
			loginOpen() {
				let that = this
				uni.login({
					provider: 'weixin', //使用微信登录
					success: loginRes => {
						this.$api.sendRequest({
							url: '/api/user/login',
							data: {
								code: loginRes.code,
								avatar: this.avatar,
								nickname: this.nickname,
							},
							success: res => {
								if (res.code == 1) {
									uni.showToast({
										title: '登录成功',
										icon: "success"
									})
									// 本地存贮
									uni.setStorage({
										key: 'token',
										data: res.data.userinfo.token,
										success: () => {
											that.$refs.uToast.show({
												type: 'default',
												message: res.msg,
												duration: 1500
											})
											setTimeout(() => {
												uni.navigateBack()
											}, 1000)
										}
									});
								} else {
									this.$refs.uToast.show({
										type: 'default',
										message: res.msg,
										duration: 1500
									})
								}
							}
						})
					}
				})


			},
			getphonenumber(e) {
				let that = this
				uni.login({
					provider: 'weixin', //使用微信登录
					success: loginRes => {
						this.$api.sendRequest({
							url: '/api/user/wechatlogin',
							data: {
								code: loginRes.code,
								avatar: this.avatar,
								nickname: this.nickname,
								phone_code: e.detail.code
							},
							success: res => {
								if (res.code == 1) {
									uni.showToast({
										title: '登录成功',
										icon: "success"
									})
									// 本地存贮
									uni.setStorage({
										key: 'token',
										data: res.data.userinfo.token,
										success: () => {
											that.$refs.uToast.show({
												type: 'default',
												message: res.msg,
												duration: 1500
											})
											setTimeout(() => {
												uni.navigateBack()
											}, 1000)
										}
									});
								} else {
									this.$refs.uToast.show({
										type: 'default',
										message: res.msg,
										duration: 1500
									})
								}
							}
						})
					}
				})
			},
			loginFn() {
				let that = this
				uni.login({
					provider: 'weixin', //使用微信登录
					success: loginRes => {
						this.$api.sendRequest({
							url: '/api/user/wechatlogin',
							data: {
								code: loginRes.code,
								avatar: this.avatar,
								nickname: this.nickname,
								phone: this.phone
							},
							success: res => {
								if (res.code == 0) {
									uni.showToast({
										title: '登录成功',
										icon: "success"
									})
									// 本地存贮
									uni.setStorage({
										key: 'token',
										data: res.data.access_token,
										success: () => {
											this.$emit('loginEnd')
											setTimeout(() => {
												that.$refs.popup.close()
											}, 1000)
										}
									});
								} else {
									uni.showToast({
										title: res.msg,
										icon: "error"
									})
								}
							}
						})
					}
				})
			},
			chooseavatar(e) {
				// 上传头像
				uni.uploadFile({
					url: `${config.baseUrl}/api/common/upload`,
					filePath: e.detail.avatarUrl,
					name: 'file',
					success: resA => {
						let a = JSON.parse(resA.data)
						console.log(a);
						this.avatar = a.data.fullurl
					},
					fail: err => {
						console.log(err);
					}
				});
			},
			input(e) {
				this.nickname = e.detail.value
			},
			keyboardheightchange(e) {
				console.log(e);
			},
			open() {
				this.$refs.popup.open('bottom');
			}
		}
	}
</script>

<style lang="scss">
	.scrollSty {
		max-height: 760rpx;
		width: 550rpx;
		min-height: 450rpx;
		padding: 25rpx;
		background-color: #fff;
		border-radius: 20rpx;
		
		    overflow-x: auto;
		    white-space: pre-wrap;
		
		view {
			
			white-space: pre-wrap;
			// word-wrap: break-word;
			/* 允许单词内断行 */
			// white-space: normal;
			/* 处理空白符，自动换行 */
		}
		font {
			white-space: pre-wrap;
		}
	}

	.infoItemImg {
		height: 120rpx;
		width: 120rpx;
		outline: none;
		border-radius: 0;
		background-color: transparent;
		line-height: inherit;
		border: none;

		image {
			height: 120rpx;
			width: 120rpx;
			border-radius: 50%;
		}
	}

	.infoItemName {
		background-color: #dedede;
		text-align: center;
		padding: 12rpx;
		border-radius: 10rpx;
	}

	.baocun {
		width: 278rpx;
		height: 88rpx;
		background: rgba(211, 211, 211, 0.4);
		opacity: 1;
		border-radius: 10rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #999999;
		margin-top: 30rpx;
		margin-bottom: 10rpx;
	}

	.infoItem {
		padding: 30rpx 0;

		image {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
		}

		margin-top: 20rpx;
	}

	.popupBox {
		border-radius: 20rpx;
		padding: 29rpx;
		padding-top: 80rpx;
		padding-bottom: 0;
	}

	// button {
	// 	// margin: 0;
	// 	outline: none;
	// 	border-radius: 0;
	// 	background-color: transparent;
	// 	line-height: inherit;
	// 	// width: max-content;
	// }

	// button:after {
	// 	border: none;
	// }
</style>
